<template>
    <div class="pagination">
        <button @click="sendPageNo(pageNo - 1)" :disabled="pageNo === 1">上一页</button>
        <button v-show="startEnd.start > 1" @click="sendPageNo(1)">1</button>
        <span v-show="startEnd.start > 2">...</span>
        <button
            v-for="(_, index) in startEnd.end - startEnd.start + 1"
            :key="_"
            :class="{ active: index + startEnd.start === pageNo }"
            @click="sendPageNo(index + startEnd.start)"
        >
            {{ index + startEnd.start }}
        </button>
        <button v-show="startEnd.end < totalPage - 1">···</button>
        <button v-show="startEnd.end < totalPage" @click="sendPageNo(totalPage)">
            {{ totalPage }}
        </button>
        <button @click="sendPageNo(pageNo + 1)" :disabled="pageNo === totalPage">下一页</button>

        <span>共 {{ total }} 条</span>
    </div>
</template>

<script>

export default {
    name: 'pagination',
    props: ['total', 'pageNo', 'pageSize', 'continues', 'getchangePageNo'],
    computed: {
        // total       总条数是91
        // pageNo      当前是在第16页
        // pageSize    一页要显示3条
        // continues   连贯显示5个页码
        // totalPage   总的页数
        //计算总页码数
        totalPage() {
            const { total, pageSize } = this;
            return Math.ceil(total / pageSize);
        },
        //计算起始与结束页
        startEnd() {
            const { pageNo, continues, totalPage } = this;
            let start, end;
            // 判断第1种特殊情况 就是当连贯页码大于总页码时
            if (continues > totalPage) {
                start = 1; //起始页
                end = totalPage; //结束页
            } else {
                start = pageNo - (continues - 1) / 2;
                end = pageNo + (continues - 1) / 2;
                // 特殊情况二  如果根据当前页计算出来的起始页小于1的情况
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                // 特殊情况三 如果根据当前页计算出来的结束页大于了总页码 此时结束页就是总页码 再往前推连贯页码
                if (end > totalPage) {
                    end = totalPage;
                    start = totalPage - continues + 1;
                }
            }
            return { start, end };
        },
    },
    methods: {
        sendPageNo(pageNo) {
            this.getchangePageNo(pageNo);
        },
    },
};
</script>

<style lang="less" scoped>
.pagination {
    text-align: center;
    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #c81623;
            color: #fff;
        }
    }
    span {
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
        color: gray;
        vertical-align: middle;
    }
}
</style>
